/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from 'react';
import {
  Space,
  Row,
  Col,
  Card,
  Image,
  Typography,
  Pagination,
  Divider,
  Tag,
  List,
  Table,
  Button,
  Input,
  Calendar,
  Badge,
  Modal,
} from 'antd';
import { ProFormSelect, ProFormRadio } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';
import { request } from 'umi';
import { values } from 'lodash';
import { months } from 'moment';
const { Title } = Typography;
const { Search } = Input;

const index: React.FC = () => {
  const [data, setData] = useState([]);
  const [consultantlist, setconsultantlist] = useState([]);
  const [supervisorlist, setsupervisorlist] = useState([]);
  const [curdate, setcurdate] = useState('');
  const [curmonth, setcurmonth] = useState(4);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [adddate, setadddate] = useState('');
  const [addname, setaddname] = useState('');
  const [addtype, setaddtype] = useState('0');

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    handleAdd();
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  useEffect(() => {
    handleGetDataByMonth(4);
  }, []);

  const handleGetDataByMonth = async (val) => {
    await request('http://localhost:8080/administrator/getInfoByMonth/2022/' + val)
      .then((res) => {
        console.log(res);
        setData(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleGetconsultantlist = async (val) => {
    await request('http://localhost:8080/administrator/getConsultantInfoByDate/' + val)
      .then((res) => {
        setconsultantlist(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleGetsupervisorlist = async (val) => {
    await request('http://localhost:8080/administrator/getSupervisorInfoByDate/' + val)
      .then((res) => {
        console.log(res)
        setsupervisorlist(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleAdd = async () => {
    console.log(typeof addtype)
    console.log(addtype)
    if (addtype == '0') {
      await request(
        'http://localhost:8080/administrator/addConsultantSchedule/' + adddate + '/' + addname,
      )
        .then(() => {
          handleGetDataByMonth(curmonth);
        })
        .catch((error) => {
          console.log(error);
        });
    } else if (addtype == '1') {
      await request(
        'http://localhost:8080/administrator/addSupervisorSchedule/' + adddate + '/' + addname,
      )
        .then(() => {
          handleGetDataByMonth(curmonth);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  };

  const handleDeleteConsultant = async (name) => {
    await request(
      'http://localhost:8080/administrator/deleteConsultantSchedule/' + curdate + '/' + name,
    )
      .then(() => {
        handleGetDataByMonth(curmonth);
        handleGetconsultantlist(curdate);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleDeleteSupvisor = async (name) => {
    await request(
      'http://localhost:8080/administrator/deleteSupervisorSchedule/' + curdate + '/' + name,
    )
      .then(() => {
        handleGetDataByMonth(curmonth);
        handleGetsupervisorlist(curdate);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const dateCellRender = (value) => {
    let year = value.year() + '';
    let month = value.month() + 1 + '';
    let day = value.date() > 9 ? value.date() + '' : '0' + value.date(); 
    let date = year + '-' + month + '-' + day; 
    const res = data.filter((item) => item.date === date); 
    if (res.length === 0) {
      return;
    }
    return (
      <>
        <ul>
          <li>
            <Badge status={'success'} text={'咨询师:' + res[0].consultantNumber} />
          </li>
          <li>
            <Badge status={'warning'} text={'督导:' + res[0].supervisorNumber} />
          </li>
        </ul>
      </>
    );
  };

  const selectDate = (value) => {
    let year = value.year() + '';
    let month = value.month() + 1 + '';
    let day = value.date() > 9 ? value.date() + '' : '0' + value.date();
    let date = year + '-' + month + '-' + day;
    setcurdate(date);
    handleGetconsultantlist(date);
    handleGetsupervisorlist(date);
    console.log(consultantlist);
    console.log(supervisorlist);
  };

  return (
    <PageContainer>
      <Modal
        title="新增排班"
        visible={isModalVisible}
        onOk={() => {
          handleOk();
        }}
        onCancel={handleCancel}
      >
        <Space>
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setaddname(value);
            }}
            placeholder="姓名"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setadddate(value);
            }}
            placeholder="排班时间"
          />
          <ProFormSelect
            name="select"
            label="Select"
            valueEnum={{
              0: '咨询师',
              1: '督导',
            }}
            onChange={(val) => setaddtype(val)}
            placeholder="督导/咨询师"
          />
        </Space>
      </Modal>
      <Row gutter={8}>
        <Col span={20}>
          <Calendar
            dateCellRender={dateCellRender}
            onSelect={selectDate}
            onChange={(val) => {
              handleGetDataByMonth(val.month() + 1);
              setcurmonth(val.month() + 1);
            }}
            style={{ height: 500 }}
            fullscreen={true}
          />
        </Col>
        <Col span={4}>
          <Card style={{ height: 500 }}>
            <Button onClick={showModal} type="primary" style={{ margin: 'auto' }}>
              新增排班
            </Button>
            <Divider />
            <List
              size="default"
              header={<Tag>在线咨询师 {curdate}</Tag>}
              dataSource={consultantlist}
              renderItem={(item) => (
                <List.Item>
                  {item}
                  <Button onClick={() => handleDeleteConsultant(item)} style={{ float: 'right' }}>
                    删除
                  </Button>
                </List.Item>
              )}
            />
            <List
              size="default"
              header={<Tag>在线督导 {curdate}</Tag>}
              dataSource={supervisorlist}
              renderItem={(item) => (
                <List.Item>
                  {item}
                  <Button onClick={() => handleDeleteSupvisor(item)} style={{ float: 'right' }}>
                    删除
                  </Button>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default index;
